<template>
  <router-view />
</template>

<script setup lang="ts"></script>

<style lang="scss">
/*
* 重写 el-table 样式
 */
:root {
  --custom-border-color: #ebeef5;
  --custom-font-size: 14px;
  --custom-row-height: 40px;
  --custom-header-bg-color: #f5f7fa; /* 表头背景色 */
  --custom-header-text-color: #303133; /* 表头文本颜色 */
  --custom-header-border-bottom: 2px solid #dcdfe6; /* 表头底部边框 */
  --custom-cell-padding: 8px 16px; /* 单元格内边距 */
  --custom-hover-bg-color: #f0f9eb; /* 悬停时的背景颜色 */
}

.el-table {
  font-size: var(--custom-font-size);
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--custom-border-color);

  th,
  td {
    padding: var(--custom-cell-padding);
    height: var(--custom-row-height);
    text-align: left;
    border-bottom: 1px solid var(--custom-border-color);
  }

  th {
    background-color: var(--custom-header-bg-color);
    color: var(--custom-header-text-color);
    font-weight: bold; /* 加粗表头文字 */
    border-bottom: var(--custom-header-border-bottom); /* 更粗的底部边框 */
  }

  .el-table__row:hover > td {
    background-color: var(--custom-hover-bg-color) !important; /* 悬停时的背景颜色 */
  }

  .el-table__header-wrapper {
    thead {
      tr {
        th {
          position: sticky;
          top: 0;
          z-index: 1;
        }
      }
    }
  }

  .el-table__empty-block {
    width: auto !important;
  }
}
</style>
